<template>
	<view class="content">
		<image class="nav-bg" mode="widthFix" :src="homeImage"></image>
		<view class="page-title c-c-c" :style="{'height':navBarHeight + 'px', 'top': statusBarHeight + 'px'}">易方行租车</view>
		<view class="check-content">
			<view class="shadow-box"></view>
			<view class="card-box">
				<view class="get-cart-box r-nw-fs-fs">
					<view class="city-box c-c-fs shrink">
						<view class="city tips-title">
							取车城市
						</view>
						<view class="city-name name" @click="goToMap">
							{{city ? city : '请点击选择地址'}}
						</view>
					</view>
					<view class="add-box c-c-fs" style="margin-left: 45rpx;">
						<view class="add tips-title">
							取车地点
						</view>
						<view class="add-name name" style="width:100%">
							<view  @click="goToMap">
								<text style="max-width: 420rpx;display: inline-block;" class="ellipsis">{{address ? address: '请点击选择地址'}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="get-cart-time r-nw-fs-fe">
					<view class="get-time c-fs-fs">
						<view class="tips-title">
							取车时间（{{startWeek}}）
						</view>
						<uni-datetime-picker  returnType="datetime" :start="currentDate" v-model="startTime" @change="changeLog">
							<text class="time">{{startTime}}</text>
						</uni-datetime-picker>
					</view>
					<view class="get-total tips-title r-nw-fs-c c-c-c">
						共计{{totalNum}}天 
					</view>
					<view class="get-time">
						<view class="tips-title" style="text-align: center;">
							还车时间（{{endtWeek}})
						</view>
						<uni-datetime-picker  returnType="datetime" :start="returnStartTime" v-model="endTime" @change="changeLogDate">
							<text class="time">{{endTime}}</text>
						</uni-datetime-picker>
					</view>
				</view>
				<view class="btn" @click="goToSelect">
					立即选车
				</view>
			</view>
		</view>
		<view class="hots-content">
			<view class="title">
				<text class="line"></text>
				<view class="title-text">
					热门车型
				</view>
			</view>
			<view class="item-cart" v-for="item,index in car_list" :key="item.id" @click="goToSelect(item.id)" v-if="index <= 4">
				<view class="cart-top r-nw-fs-c">
					<image class="image" :src="item.cover" mode="widthFix"></image>
					<view class="content">
						<view class="name">
							<view class="name-text">
								{{item.name}}
							</view>
							<view class="name-price">
								<text style="font-size: 24rpx;color: #F78500;">￥</text><text
									style="color: #F78500;font-size: 36rpx;">{{item.average_price}}</text>/日均
							</view>
						</view>
						<view class="desc r-nw-fs-c">
							<image :src="item.icon" style="width: 76rpx;height: 34rpx;" mode="aspectFit" v-if="item.icon"></image>
							<!-- <tag :type="item.type"></tag> -->
							<text
								class="text">{{item.describe}}</text>
						</view>
					</view>
				</view>
				<!-- <view class="cart-bottom r-nw-sb-c">
					<span class="total-price">总价：￥{{item.total_price}}</span>
					<view class="rent">
						<text style="font-size: 24rpx;color: #F78500;">￥</text><text
							style="color: #F78500;font-size: 36rpx;">{{item.price}}</text>/天
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import getDateTime from '@/utils/public.js';
	import { configs, cars } from '@/utils/api.js';
	export default {
		data() {
			return {
				homeImage: '',
				navBarHeight: app.globalData.navBarHeight,
				menuHeight: app.globalData.menuHeight,
				statusBarHeight: app.globalData.statusBarHeight,
				address: '',
				totalNum: 0, // 总计天数
				currentTime: '', // 当前时间
				city: '',
				startTime: '', // 取车时间
				start_at: '', // 取车时间时间戳
				startWeek: '', 
				currentDate: '', // 当前时间
				returnStartTime: '', // 默认还车时间
				endTime: '', // 还车时间
				endtWeek: '', 
				end_at: '', // 还车时间时间戳
				car_list: []
			}
		},
		onLoad(query) {
			this.getConfigs();
			// 渠道id
			uni.setStorageSync('channel_id', query.scene || 0);
			this.currentDate = getDateTime.dateTimeStr('y-m-d h:i:s').str;
			this.startWeek = getDateTime.timeFormat(this.currentDate).currentWeek;
			this.startTime = this.currentDate;
			this.start_at = this.timeToTimestamp(this.startTime);
			this.startTimeStorge();
			this.afterTimeStr(this.startTime);
			this.getCarList();
		},
		onShow() {
			this.city = uni.getStorageSync('city');
			this.address = uni.getStorageSync('address');
		},
		methods: {
			// 默认还车时间（取车时间+1）
			afterTimeStr(time) {
				let dateTime = new Date(time);
				dateTime = dateTime.setDate(dateTime.getDate() + 1);
				dateTime = new Date(dateTime);
				this.returnStartTime = getDateTime.timeFormat(dateTime,'y-m-d h:i:s').str;
				this.endTime = this.returnStartTime;
				this.end_at = this.timeToTimestamp(this.endTime);
				this.endTimeStorge();
			},
			// 选择开始时间
			changeLog(e) {
				this.start_at = this.timeToTimestamp(e);
				this.startTimeStorge();
				this.afterTimeStr(this.startTime);
				this.getCarList();
			},
			// 选择结束时间
			changeLogDate(e) {
				this.end_at = this.timeToTimestamp(e);
				this.endTimeStorge();
				this.getCarList();
			},
			// 开始时间存储
			startTimeStorge() {
				this.startWeek = getDateTime.timeFormat(this.currentDate).currentWeek;
				uni.setStorageSync('start_at', this.start_at);
				uni.setStorageSync('startWeek', this.startWeek);
				uni.setStorageSync('startTime', this.startTime);
			},
			// 结束时间/共计n天存储
			endTimeStorge() {
				// this.endTime = this.returnStartTime;
				this.endtWeek = getDateTime.timeFormat(this.endTime).currentWeek;
				this.totalNum = this.getDiffDay(this.startTime,this.endTime);
				uni.setStorageSync('end_at', this.end_at);
				uni.setStorageSync('endtWeek', this.endtWeek);
				uni.setStorageSync('endTime', this.endTime);
				uni.setStorageSync('totalNum', this.totalNum);
			},
			/* 时间yyyy-MM-dd HH:mm:ss转为时间戳 */
			  timeToTimestamp(time){
			    let timestamp = Date.parse(new Date(time).toString());
			    timestamp = timestamp / 1000; //时间戳为13位需除1000，时间戳为13位的话不需除1000
			    return timestamp;
			  },
			// 计算时间差
			 getDiffDay(date_1, date_2){
			       let totalDays, diffDate, totalDaysTrunc
			       let myDate_1 = Date.parse(date_1)
			       let myDate_2 = Date.parse(date_2)
			       diffDate = Math.abs(myDate_1 - myDate_2) 
				   // 具体的时间差
			       totalDays = diffDate / (1000 * 3600 * 24)
				   // 取整，且与totalDays对比，如果大于就+1
				   totalDaysTrunc =  Math.trunc(totalDays);
				   if(totalDaysTrunc < totalDays) {
						return   Math.floor(diffDate / (1000 * 3600 * 24)) + 1;
				   } else {
					   return   Math.floor(diffDate / (1000 * 3600 * 24))
				   }
			 },
			// 获取配置信息
			getConfigs() {
				uni.showLoading({title: '加载中...'})
				configs().then(res => {
					if(res.code === 200) {
						uni.hideLoading();
						this.homeImage = res.data.user_home_image;
						uni.setStorageSync('sys_setting_configs', res.data);
					}
				})
			},
			goToMap() {
				uni.navigateTo({
					url: '/pages/index/map1'
				})
			},
			goToSelect() {
				if(this.city && this.address) {
					uni.navigateTo({
						url: '/pages/index/cartType'
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '请先选择地址'
					})
				}
			},
			getCarList(){
				const startTime = uni.getStorageSync('startTime')
				const endTime = uni.getStorageSync('endTime')
				let data = {
					day: 1,
					category_id: 0,
					volume_direction: 'asc', // 综合排序
					configs: this.fliterConfigArr, // 车型配置
					price_direction: 'asc', // 价格排序
					page: 1,
					is_hot: 1,
					startTime,
					endTime
				}
				cars(data).then(res => {
					if(res.code === 200) {
						this.car_list = res.data.list
					}
				})
				.catch(err => {})
			},
			goToDetailConfig(){
				uni.navigateTo({
					url: '/pages/index/cartType'
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		position: relative;
		.nav-bg {
		  width: 100%;
		  position: absolute; /* 使用 z-index 调整上下层级需要脱离文档流 */
		  top: 0;
		}
		.page-title {
			position: relative;
			z-index: 9999;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 48rpx;
			letter-spacing: 1px;
			text-align: center;
			font-style: normal;
		}
		.check-content {
			padding-top: 528rpx; position: relative;z-index: 99; display: flex; justify-content: center;
			.shadow-box {
				position: absolute;
				left: 0;
				right: 0;
				top:528rpx;
				z-index: 1;
				width: 750rpx;
				height: 199rpx;
				background: linear-gradient( 180deg, rgba(251,251,252,0) 0%, rgba(245,246,248,0.78) 72%, #F5F6F8 100%);
			}
			.card-box {
				position: relative;
				padding: 32rpx 30rpx;
				z-index: 99;
				width: 638rpx;
				height: 470rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0,0,0,0.02);
				border-radius: 24rpx;
				.get-cart-box {
					.name {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 36rpx;
						color: #333333;
						line-height: 50rpx;
					}
					.add-name {
						position: relative;
						.select-box {
							padding: 10rpx;
							position: absolute;
							left: -20rpx;
							top: 50rpx;
							z-index: 100;
						}
					}
				}
			}
		}
	}
	.tips-title {
		margin-bottom: 12rpx;
		font-weight: 400;
		font-size: 22rpx;
		color: #999999;
		line-height: 30rpx;
	}
	.time {
		font-family: PingFangSC, PingFang SC;
		font-size: 26rpx;
		color: #333333;
		line-height: 40rpx;
	}
	page {
		background-color: #F5F6F8;
	}
	.icon-select {
		width: 32rpx;
		height: 32rpx;
	}
	.active-select {
		transform: rotate(180deg);
	}
	.get-cart-time{
		margin: 32rpx auto 72rpx;
		padding: 32rpx 10rpx;
		height: 74rpx;
		background: #F6F7FB;
		border-radius: 24rpx;
		.get-time {
			width: 260rpx;
			flex-shrink: 0;
		}
		.get-total {
			width: 110rpx;
			height:20rpx;
			font-size: 20rpx;
		}
	}
	.btn {
		position: absolute;
		margin: 0 auto;
		width: 642rpx;
		height: 100rpx;
		background: linear-gradient( 270deg, #FF3315 0%, #FFB034 100%);
		border-radius: 24rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 100rpx;
		text-align: center;
	}
	/deep/ .uni-datetime-picker--btn{
		background-color: #FF3315 !important;
	}
	/deep/ .uni-calendar-item__weeks-box .uni-calendar-item--checked{
		background-color: #FF3315 !important;
	}
	
	.hots-content {
		width: 638rpx;
		margin: 28rpx 28rpx;
		background: white;
		padding: 28rpx;
		border-radius: 24rpx;
		.title {
			.line {
				
			}
			.title-text {
				font-size: 28rpx;
			}
		}
		.item-cart {
			margin-top: 16rpx;
			padding: 37rpx 0 32rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			&:first-child {
				margin-top: 0;
			}
			.cart-top {
				.image {
					width: 176rpx;
					height: 420rpx;
				}
				.content {
					margin-left: 20rpx; flex: 1;
					.name {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 32rpx;
						color: #333333;
						line-height: 32rpx;
						display: flex;
						justify-content: space-between;
						&-price{
							font-size: 22rpx;
						}
					}
					.desc {
						margin-top: 20rpx;
						.text {
							margin-left: 6rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
							line-height: 32rpx;
						}
					}
				}
			}
			.cart-bottom {
				margin-top: 27rpx;
				.total-price {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 22rpx;
					color: #666666;
					line-height: 30rpx;
				}
				.rent {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 22rpx;
					color: #333333;
					line-height: 30rpx;
				}
			}
		}
	}
</style>
